<!-- This file renders a group of extension commands -->
<!-- Input props to this component is an array of ExtPackageJsonExtra[] -->
<script lang="ts">
	import {
		CmdTypeEnum,
		CustomUiCmd,
		ExtPackageJsonExtra,
		HeadlessCmd,
		TemplateUiCmd
	} from "@kksh/api/models"
	import { Badge, Command } from "@kksh/svelte5"
	import { IconMultiplexer } from "@kksh/ui"
	import { DraggableCommandGroup } from "../custom"
	import type { CmdValue, OnExtCmdSelect } from "./types"

	type Cmd = (CustomUiCmd | TemplateUiCmd | HeadlessCmd) & { ext: ExtPackageJsonExtra }
	const {
		extCmds,
		heading,
		isDev,
		hmr,
		onExtCmdSelect
	}: {
		extCmds: Cmd[]
		heading: string
		isDev: boolean
		hmr: boolean
		onExtCmdSelect: OnExtCmdSelect
	} = $props()
</script>

{#snippet cmd(cmd: Cmd)}
	<Command.Item
		class="flex justify-between"
		onSelect={() => {
			onExtCmdSelect(cmd.ext, cmd, { isDev, hmr })
		}}
		value={`${isDev ? "dev-ext" : "ext"}-${cmd.name}`}
	>
		<span class="flex gap-2">
			<IconMultiplexer icon={cmd.icon ?? cmd.ext.kunkun.icon} class="!h-5 !w-5 shrink-0" />
			<span>{cmd.name}</span>
		</span>
		<span class="flex gap-1">
			{#if isDev}
				<Badge class="scale-75 rounded-sm bg-green-500 px-1">Dev</Badge>
			{/if}
			{#if hmr}
				<Badge class="scale-75 rounded-sm px-1">HMR</Badge>
			{/if}
		</span>
	</Command.Item>
{/snippet}
<!-- 
{#snippet ext(ext: ExtPackageJsonExtra)}
	{#each ext.kunkun.customUiCmds ?? [] as _cmd}
		{@render cmd(ext, _cmd)}
	{/each}
	{#each ext.kunkun.templateUiCmds ?? [] as _cmd}
		{@render cmd(ext, _cmd)}
	{/each}
	{#each ext.kunkun.headlessCmds ?? [] as _cmd}
		{@render cmd(ext, _cmd)}
	{/each}
{/snippet} -->

<DraggableCommandGroup {heading}>
	{#each extCmds as _extCmd}
		{@render cmd(_extCmd)}
	{/each}
</DraggableCommandGroup>
